<template>
  <view class="bindTheSite">
    <view class="header">
      {{ t("dashboard.siteCoding") }}
      <!-- 站点编码 -->
    </view>
    <view class="bindTheSite-info">
      <up-form
        labelPosition="left"
        :model="bindTheSite"
        :rules="rules"
        ref="uFormRef"
      >
        <up-form-item prop="account" borderBottom>
          <!-- 请输入站点编码 -->

          <up-input
            v-model="bindTheSite.account"
            class="bindTheSite-input"
            :placeholder="t('dashboard.pleaseEnterTheSiteCode')"
            border="none"
            color="#fff"
            :clearable="true"
          >
            <template #suffix>
              <text style="color: #fff">*</text>
            </template>
          </up-input>
        </up-form-item>
        <up-form-item borderBottom>
          <up-button
            type="primary"
            class="btn-submit"
            :text="t('dashboard.bind')"
            shape="circle"
            @click="handleNext"
          ></up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import apis from "@/apis/index.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const bindTheSite = ref({
  account: "",
});
const rules = ref({
  account: {
    required: true,
    message: t("dashboard.pleaseEnterTheSiteCode"),
    trigger: ["blur", "change"],
  },
});

const handleNext = () => {
  let params = {
    emsCode: bindTheSite.value.account,
  };
  apis.addSearchSite(params).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      uni.navigateTo({
        url: `/pages/dashboard/scanBingDing?data=${JSON.stringify(res.data)}`,
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.bindTheSite {
  width: 100%;
  padding: 80rpx 56rpx;
  box-sizing: border-box;
  .header {
    font-family: Alibaba PuHuiTi 3;
    font-size: 40rpx;
    font-weight: 500;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #ffffff;
    margin-bottom: 40rpx;
  }
  .bindTheSite-info {
    width: 100%;
    box-sizing: border-box;
    text-align: center;

    .bindTheSite-input {
      width: 100%;
      height: 88upx;
      background-color: #222d49;
      border-radius: 150upx;
      z-index: 1;
      padding: 0 36upx !important;
      box-sizing: border-box;
    }

    :deep(.u-form-item__body__right__message) {
      text-align: left;
    }
  }
}
</style>
